<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股票模拟交易系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .active-nav {
            color: #3b82f6;
            font-weight: bold;
        }
        .page {
            display: none;
        }
        .page.active {
            display: block;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen pb-20">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8 text-center">
            <h1 class="text-3xl font-bold text-blue-600">股票模拟交易系统</h1>
            <p class="text-gray-600 mt-2">基于量化分析的模拟交易平台</p>
        </header>

        <!-- Main Content Pages -->
        <div id="main-content">
            <!-- Dashboard Page -->
            <div id="dashboard-page" class="page active">
                <div class="bg-white rounded-xl shadow-md p-6 mb-6">
                    <h2 class="text-xl font-semibold mb-4">账户概览</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <div class="text-gray-700">总资产</div>
                            <div class="text-2xl font-bold" id="total-assets">1,000,000.00</div>
                        </div>
                        <div class="bg-green-50 p-4 rounded-lg">
                            <div class="text-gray-700">可用资金</div>
                            <div class="text-2xl font-bold" id="available-balance">1,000,000.00</div>
                        </div>
                        <div class="bg-purple-50 p-4 rounded-lg">
                            <div class="text-gray-700">持仓收益</div>
                            <div class="text-2xl font-bold text-green-500" id="position-profit">0.00</div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-semibold mb-4">市场动态</h2>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">代码</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">名称</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">最新价</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">涨跌幅</th>
                                </tr>
                            </thead>
                            <tbody id="market-table" class="bg-white divide-y divide-gray-200">
                                <!-- 动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Trade Page -->
            <div id="trade-page" class="page">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 行情表格 -->
                    <div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden">
                        <div class="p-6">
                            <h2 class="text-xl font-semibold mb-4">可交易股票</h2>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">代码</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">名称</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">最新价</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">涨跌幅</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="stock-table" class="bg-white divide-y divide-gray-200">
                                        <!-- 动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 交易面板 -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h2 class="text-xl font-semibold mb-6">交易面板</h2>
                        
                        <!-- 交易表单 -->
                        <form id="trade-form" class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">股票代码</label>
                                <div class="flex">
                                    <input type="text" id="stock-code" class="flex-1 px-3 py-2 border rounded-l-md" required>
                                    <button type="button" id="refresh-btn" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-r-md">
                                        <i class="fas fa-sync-alt"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">交易方向</label>
                                    <select id="trade-type" class="w-full px-3 py-2 border rounded-md">
                                        <option value="buy">买入</option>
                                        <option value="sell">卖出</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">价格类型</label>
                                    <select id="price-type" class="w-full px-3 py-2 border rounded-md">
                                        <option value="market">市价</option>
                                        <option value="limit">限价</option>
                                    </select>
                                </div>
                            </div>

                            <div id="limit-price-group" class="hidden">
                                <label class="block text-sm font-medium text-gray-700 mb-1">委托价格</label>
                                <input type="number" id="limit-price" step="0.01" class="w-full px-3 py-2 border rounded-md">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">交易数量(股)</label>
                                <input type="number" id="trade-amount" min="100" step="100" class="w-full px-3 py-2 border rounded-md" required>
                            </div>

                            <div class="pt-2">
                                <button type="submit" class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                    <i class="fas fa-check-circle mr-2"></i>确认委托
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Portfolio Page -->
            <div id="portfolio-page" class="page">
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-semibold mb-4">我的持仓</h2>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">代码</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">名称</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">持仓数量</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">成本价</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">当前价</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">盈亏</th>
                                </tr>
                            </thead>
                            <tbody id="portfolio-table" class="bg-white divide-y divide-gray-200">
                                <!-- 动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Strategy Page -->
            <div id="strategy-page" class="page">
                <div class="bg-white rounded-xl shadow-md p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-semibold">量化策略</h2>
                        <button id="btn-new-strategy" class="bg-purple-500 text-white px-4 py-2 rounded">
                            <i class="fas fa-plus mr-2"></i>新建策略
                        </button>
                    </div>

                    <!-- 策略列表 -->
                    <div class="overflow-x-auto">
                        <table class="w-full border-collapse">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="p-3 text-left">策略名称</th>
                                    <th class="p-3 text-left">类型</th>
                                    <th class="p-3 text-left">状态</th>
                                    <th class="p-3 text-left">累计收益</th>
                                    <th class="p-3 text-left">操作</th>
                                </tr>
                            </thead>
                            <tbody id="strategy-list" class="divide-y divide-gray-200">
                                <!-- 动态加载策略 -->
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 策略编辑区域 -->
                    <div class="mt-8">
                        <h3 class="text-lg font-medium mb-4">策略编辑器</h3>
                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                            <!-- 策略配置面板 -->
                            <div class="lg:col-span-1 bg-gray-50 p-4 rounded-lg">
                                <h4 class="font-medium mb-3">策略配置</h4>
                                
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">策略名称</label>
                                        <input type="text" id="strategy-name" class="w-full p-2 border rounded" placeholder="输入策略名称">
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">策略类型</label>
                                        <select id="strategy-template" class="w-full p-2 border rounded">
                                            <option value="">自定义策略</option>
                                            <option value="turtle">海龟交易策略</option>
                                            <option value="golden_cross">均线金叉策略</option>
                                            <option value="moving_average">均线策略</option>
                                        </select>
                                    </div>
                                    
                                    <!-- 海龟策略参数 -->
                                    <div id="turtle-params" class="strategy-params hidden space-y-3">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">突破周期(日)</label>
                                            <input type="number" value="20" class="w-full p-2 border rounded">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">ATR倍数</label>
                                            <input type="number" value="2" step="0.1" class="w-full p-2 border rounded">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">头寸比例(%)</label>
                                            <input type="number" value="1" step="0.1" class="w-full p-2 border rounded">
                                        </div>
                                    </div>
                                    
                                    <!-- 均线金叉策略参数 -->
                                    <div id="golden-cross-params" class="strategy-params hidden space-y-3">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">短期均线(日)</label>
                                            <input type="number" value="5" class="w-full p-2 border rounded">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">长期均线(日)</label>
                                            <input type="number" value="10" class="w-full p-2 border rounded">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">交易量阈值(手)</label>
                                            <input type="number" value="1000" class="w-full p-2 border rounded">
                                        </div>
                                    </div>
                                    
                                    <!-- 均线策略参数 -->
                                    <div id="moving-average-params" class="strategy-params hidden space-y-3">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">均线周期(日)</label>
                                            <input type="number" value="10" class="w-full p-2 border rounded">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">价格偏离比例(%)</label>
                                            <input type="number" value="2" step="0.1" class="w-full p-2 border rounded">
                                        </div>
                                    </div>
                                    
                                    <div class="pt-2">
                                        <button id="load-template-btn" class="w-full bg-blue-500 text-white py-2 rounded">
                                            加载模板
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 代码编辑器 -->
                            <div class="lg:col-span-2">
                                <div class="bg-white border rounded-lg overflow-hidden">
                                    <div class="border-b flex">
                                        <button class="py-2 px-4 bg-gray-100 border-r active">JavaScript</button>
                                        <button class="py-2 px-4 border-r">Python</button>
                                        <button class="py-2 px-4 border-r">JSON</button>
                                        <button class="py-2 px-4">YAML</button>
                                    </div>
                                    <div class="h-96">
                                        <textarea id="strategy-code" class="w-full h-full font-mono text-sm p-4 border-r resize-none">/* 
 * 自定义策略模板
 * 可用变量:
 * - data: 包含open,high,low,close,volume等历史数据
 * - params: 自定义参数对象
 */

function customStrategy(data, params) {
    // 示例策略逻辑
    const lastClose = data.close[data.close.length - 1];
    const prevClose = data.close[data.close.length - 2];
    
    if (lastClose > prevClose) {
        return {
            signal: 'BUY',
            price: lastClose,
            comment: '价格上涨趋势'
        };
    }
    
    return null;
}</textarea>
                                    </div>
                                </div>
                                
                                <div class="flex justify-end space-x-3 mt-4">
                                    <button id="validate-strategy-btn" class="px-4 py-2 bg-yellow-500 text-white rounded">
                                        验证策略
                                    </button>
                                    <button id="save-strategy-btn" class="px-4 py-2 bg-green-500 text-white rounded">
                                        保存策略
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 字段管理区域 -->
                    <div class="mt-8">
                        <h3 class="text-lg font-medium mb-4">字段管理</h3>
                        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                            <!-- 控制面板 -->
                            <div class="lg:col-span-1 bg-gray-50 p-4 rounded-lg">
                                <h4 class="font-medium mb-3">新增字段</h4>
                                
                                <div class="mb-4">
                                    <input type="text" id="new-field-name" placeholder="字段名称" class="w-full p-2 border rounded mb-2">
                                    <textarea id="field-formula" placeholder="公式 (如: (close-open)/open*100)" class="w-full p-2 border rounded mb-2" rows="3"></textarea>
                                    <button id="add-field-btn" class="w-full bg-blue-500 text-white py-1 rounded text-sm">
                                        添加字段
                                    </button>
                                </div>
                                
                                <!-- 函数帮助 -->
                                <div class="mt-6">
                                    <h4 class="font-medium mb-2">函数帮助</h4>
                                    <div class="text-sm space-y-2">
                                        <div>
                                            <p class="font-semibold">数学函数:</p>
                                            <ul class="list-disc pl-5">
                                                <li>log(x) - 自然对数</li>
                                                <li>log10(x) - 常用对数</li>
                                                <li>exp(x) - 指数函数</li>
                                                <li>sqrt(x) - 平方根</li>
                                                <li>pow(x,y) - 幂函数</li>
                                            </ul>
                                        </div>
                                        <div>
                                            <p class="font-semibold">Quant函数:</p>
                                            <ul class="list-disc pl-5">
                                                <li>rank(x) - 排名</li>
                                                <li>scale(x) - 缩放</li>
                                                <li>corr(x,y,window) - 相关系数</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 字段列表 -->
                            <div class="lg:col-span-3">
                                <div class="bg-white border rounded-lg overflow-hidden">
                                    <table class="w-full">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="p-3 text-left">字段名</th>
                                                <th class="p-3 text-left">公式</th>
                                                <th class="p-3 text-left">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="custom-fields-list" class="divide-y divide-gray-200">
                                            <tr>
                                                <td colspan="3" class="p-3 text-center text-gray-500">暂无自定义字段</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!-- 数据预览 -->
                                <div class="mt-6">
                                    <h4 class="font-medium mb-3">数据预览</h4>
                                    <div class="bg-white border rounded-lg overflow-auto max-h-96">
                                        <table class="w-full">
                                            <thead class="bg-gray-50 sticky top-0">
                                                <tr id="preview-table-header">
                                                    <th class="p-2 border">代码</th>
                                                    <th class="p-2 border">名称</th>
                                                    <th class="p-2 border">开盘价</th>
                                                    <th class="p-2 border">收盘价</th>
                                                    <th class="p-2 border">最高价</th>
                                                    <th class="p-2 border">最低价</th>
                                                    <th class="p-2 border">成交量</th>
                                                </tr>
                                            </thead>
                                            <tbody id="preview-table-body">
                                                <!-- Preview data will be populated here -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Navigation -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="grid grid-cols-4 gap-1">
            <button data-target="dashboard-page" class="nav-item py-3 px-4 text-center active-nav">
                <i class="fas fa-home block text-lg mb-1"></i>
                <span class="text-xs">首页</span>
            </button>
            <button data-target="trade-page" class="nav-item py-3 px-4 text-center">
                <i class="fas fa-exchange-alt block text-lg mb-1"></i>
                <span class="text-xs">交易</span>
            </button>
            <button data-target="portfolio-page" class="nav-item py-3 px-4 text-center">
                <i class="fas fa-chart-pie block text-lg mb-1"></i>
                <span class="text-xs">持仓</span>
            </button>
            <button data-target="strategy-page" class="nav-item py-3 px-4 text-center">
                <i class="fas fa-robot block text-lg mb-1"></i>
                <span class="text-xs">策略</span>
            </button>
        </div>
    </nav>
    <script src="trading.js"></script>
    <script src="index.js"></script>
</body>
</html>